<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>dataTables练习</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/dt-1.10.20/b-1.6.1/datatables.css"/>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/myCss.css">
</head>
<body>

<!--提示-->
<div class="alert fade" role="alert">
    <span class="text-tip"></span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<!--模态框html-->
<div>
    <div class="modal fade op-modal" id="exampleModal" tabindex="10" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">123</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="userInfoForm">
                        <div class="form-group row">
                            <label for="inputName" class="col-sm-2 col-form-label">姓名：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="inputName" placeholder="Name">
                            </div>
                        </div>
                        <div class="form-group form-row align-items-center">
                            <div class="col-sm-2 form-row align-items-center" style="padding: 4px 15px;">性别：</div>
                            <div class="col-auto" style="padding: 6px 0px 0px 15px">
                                <input type="radio" name="sex" id="inputSexMan" value="男">
                                <label for="inputSexMan">男</label>
                            </div>
                            <div class="col-auto" style="padding: 6px 0px 0px 10px">
                                <input type="radio" name="sex" id="inputSexWoman" value="女">
                                <label for="inputSexWoman">女</label>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="inputAge" class="col-sm-2 col-form-label">年龄：</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" id="inputAge" placeholder="Age">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="inputBirthday" class="col-sm-2 col-form-label">生日：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="inputBirthday" placeholder="例：20201108">
                            </div>
                        </div>
                    </form>
                    <div class="tip-info">确定删除该条学生信息吗？</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary btn-sm submit">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!--年级学生信息表格-->
<div>
    <div class="modal fade bd-example-modal-xl st-modal" id="studentsInfoModal" tabindex="-1" role="dialog" aria-labelledby="studentsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="studentsModalLabel"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
<!--                    <div class="table-operate-btns">-->
<!--                        <div class="btn-add">-->
<!--                            <button type="button" class="btn btn-primary btn-sm add" data-toggle="modal" data-target="#exampleModal" data-whatever="新增用户信息">新增+</button>-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="table-body">
                        <table id="t1" class="table table-bordered table-hover" style="width: 100%;">
                            <thead>
                            <tr style="background-color: aliceblue">
                                <th>序号</th>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>年龄</th>
                                <th>生日</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--大学学生人数统计表-->
<div class="table-container">
    <div class="table-operate-btns">
        <div class="btn-add">
            <button  id="add-grade" class="btn btn-primary btn-sm add"  >新增</button>
        </div>
        <div class="btn-change">
            <button  id="change-grade" class="btn btn-primary btn-sm change" disabled>修改</button>
        </div>
        <div class="btn-delete">
            <button  id="delete-grade" class="btn btn-primary btn-sm delete" disabled>删除</button>
        </div>
    </div>
    <div class="table-title">
        <h3>大学学生人数统计表</h3>
    </div>
    <div class="table-body">
        <table  id="totalTable" class="table table-bordered table-hover" style="width: 100%;">
            <thead>
            <tr style="background-color: aliceblue">
                <th>年级</th>
                <th>男生人数</th>
                <th>女生人数</th>
                <th>总人数</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
</body>
<script src="./js/jquery.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/dt-1.10.20/b-1.6.1/datatables.js"></script>
<script type="text/javascript" src="./js/myJs.js"></script>
<script type="text/javascript" src="./js/tTable.js"></script>
</html>
